<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta charset="utf-8" />
	<title></title>
	<link href="../css/bootstrap.min.css" rel="stylesheet">
	<link href="../css/bootstrap-select.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
	<link href="../css/font-awesome.min.css" rel="stylesheet">
	<link href="../css/JyyCommon.css" rel="stylesheet">
	<link href="../css/JyyTable.css" rel="stylesheet">
	<link href="../css/JyyTree.css" rel="stylesheet">
	<link href="../css/JyyMsgBox.css" rel="stylesheet">
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
	<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-select.js"></script>
	<script type="text/javascript" src="../js/jyy_modal.js"></script>
	<script type="text/javascript" src="../js/JyyCommon.js"></script>
	<script type="text/javascript" src="../js/JyyTable.js"></script>
	<script type="text/javascript" src="../js/JyyTree.js"></script>
	<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
	<script type="text/javascript" src="../js/JyyLoading.js"></script>
	<script type="text/javascript" src="../js/echarts.js"></script>
	<style>
	.heidenbt{
		display: none
	}
	.echarts{
		width: 100%;
		height:300px;
		margin-bottom: 50px;
	}
</style>
	<script type="text/javascript">
		var tree = null;
		var planId ='';
		$(function(){
			planTree()
		});
		function planTree(){
			
			var data1 = getTreeDatas();
			 
			function buildDomTree() {
				var data = [];
				function walk(nodes, data) {
					if (!nodes) {
						return;
					}
					$.each(nodes, function(id, node) {
						var obj = {
							id : node.code,
							text : node.name
						};
						if (node.isLeaf == true) {
							obj.nodes = [];
							walk(node.items, obj.nodes);
						}
						data.push(obj);
					});
				}
	 
				walk(data1, data);
				return data;
			}
	 
			$('#knowledgeTree').treeview({
            	data: buildDomTree(),
                showCheckbox: true,
                onNodeChecked: function (event, data) {
                	if(data.selectable&&data.nodes==undefined){
                     var str = $("#knowledgeText").val();
                     if (str.length > 0) {
                     	planId = planId+data.id + ','
                     	if(str.indexOf(data.text)==-1){
                          $("#knowledgeText").val(str + ',' +data.text);
                     	}
                     } else {
                     	planId = planId+data.id + ','
                         $("#knowledgeText").val(data.text);
                     }
                	}
                },
                onNodeUnchecked: function (event, node) {
					if(node.selectable&&node.nodes==undefined){
			        	var str = $("#knowledgeText").val();
		                if (str.length > 0) {
		                	if(str.indexOf(node.text)!=-1){
		                		planId = resListString(planId,node.id)+',';
			                    $("#knowledgeText").val(resListString(str,node.text));
		                	}
		                } else {
		                    $("#knowledgeText").val('');
		                }
		        	}
                }
            });
			$("#startDate").datetimepicker({
				format : 'yyyy-mm-dd', // 展现格式
				autoclose : true, // 选择日期后关闭
				language : 'zh-CN', //显示语言为中文
				minView : "2"
			});
			$("#endDate").datetimepicker({
				format : 'yyyy-mm-dd', // 展现格式
				autoclose : true, // 选择日期后关闭
				language : 'zh-CN', //显示语言为中文
				minView : "2"
			});
			$('#startDate').datetimepicker().on('changeDate', function(ev){
				if(ev) {
					var endDate = $("#endDate").val();
					var startDate = formatDate(ev.date);
					if(endDate != "" && endDate != undefined) {
						endDate = endDate.replace(/-/g,"");
						if(endDate < startDate) {
							JyyMsgBox.alert({ title:"警告", message:"结束时间不能早于开始时间",type:"warning"}).on(function (e) {});
							$("#startDate").val("");
							return false;
						}
					}
				}
			});
			$('#endDate').datetimepicker().on('changeDate', function(ev){
				if(ev) {
					var startDate = $("#startDate").val();
					var endDate = formatDate(ev.date);
					if(startDate != "" && startDate != undefined) {
						startDate = startDate.replace(/-/g,"");
						if(endDate < startDate) {
							JyyMsgBox.alert({ title:"警告", message:"结束时间不能早于开始时间",type:"warning"}).on(function (e) {});
							$("#endDate").val("");
							return false;
						}
					}
				}
			});
		}
		function formatDate(date) {
			var d = new Date(date),
			month = '' + (d.getMonth() + 1),
			day = '' + d.getDate(),
			year = d.getFullYear();
			 
			if (month.length < 2) month = '0' + month;
			if (day.length < 2) day = '0' + day;
			 
			return [year, month, day].join('');
		}
		function selectData(){
			$("#operate").css("display","block");
			var startDate =  $('#startDate').val(); 
			var endDate =  $('#endDate').val(); 
			var planName = $("#knowledgeText").val();
			if(JyyCommon.isEmpty(startDate) || JyyCommon.isEmpty(endDate)){
				JyyMsgBox.alert({ title:"警告", message:"[时间]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			if(JyyCommon.isEmpty(planName)){
				JyyMsgBox.alert({ title:"警告", message:"[方案名称]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			JyyLoading.start();
			$.when(getEcahtData(startDate, endDate, planName)).done(function(echatData){
				createEchat(echatData);
				
				JyyLoading.end();
			});
		}
		function createEchat(echartData) {
			var echartsDiv = $("#echarts");
			echartsDiv.empty();
			var unitArr = ["常规火电", "启停火电", "热电","核电","抽蓄","燃油机组","储能","水电","风电","光伏","光热"];
			var colorArr = ["#F01B2D", "#FF76FA", "#f076ee","#C7CEB2","#548DD4","#89A9E2","#FAC08F","#00B0F0","#92D050","#FFC000","#FFE957"];
			for(var i = 0;i < echartData.planIdList.length;i++) {
				if(echartData.planIdList[i] == '') continue;
				echartsDiv.append($('<div id="echart'+echartData.planIdList[i]+'" class="echarts"></div>'));
				var chartDom = document.getElementById('echart'+echartData.planIdList[i]);
				var myChart = echarts.init(chartDom);
				var option;
				var legendData = echartData['legend'+echartData.planIdList[i]];
				var echatData = echartData['echat'+echartData.planIdList[i]];
				var seriesData = [];
				for(var j = 0;j < echatData.length;j++) {
					if(echatData[j].name == "负荷") {
						seriesData.push({
							name: echatData[j].name,
							type: 'line',
						    emphasis: {
						    	focus: 'series'
						    },
                            itemStyle : {
                                normal : {
                                	color:'#000000',
                                    lineStyle:{
                                        color:'#000000'  
                                    }
                                }
                            },
						    data: echatData[j].seriesData
						});
					}else if(unitArr.includes(echatData[j].name)) {
						seriesData.push({
							name: echatData[j].name,
							type: 'line',
							stack: '总量',
					      	areaStyle: {},
						    emphasis: {
						    	focus: 'series'
						    },
                            itemStyle : {
                                normal : {
                                	color: colorArr[unitArr.indexOf(echatData[j].name)],
                                    lineStyle:{
                                        color:colorArr[unitArr.indexOf(echatData[j].name)]
                                    }
                                }
                            },
						    data: echatData[j].seriesData
						});
					} else {
						seriesData.push({
							name: echatData[j].name,
							type: 'line',
							stack: '总量',
					      	areaStyle: {},
						    emphasis: {
						    	focus: 'series'
						    },
						    data: echatData[j].seriesData
						});
					}
				}
				
				option = {
					title: {
				    	text: echartData.planNameList[i]
				  	},
				  	tooltip: {
				    	trigger: 'axis',
				    	axisPointer: {
				      		type: 'cross',
				      		label: {
				        		backgroundColor: '#6a7985'
				      		}
				    	},
				    	position: function(point, params, dom, rect, size) {
				             //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
				             var x = point[0]; //
				             var y = point[1];
				             var viewWidth = size.viewSize[0];
				             var viewHeight = size.viewSize[1];
				             var boxWidth = size.contentSize[0];
				             var boxHeight = size.contentSize[1];
				             var posX = 0; //x坐标位置
				             var posY = 0; //y坐标位置

				             if (x < boxWidth) { //左边放不开
				                 posX = 5;
				             } else { //左边放的下
				                 posX = x - boxWidth;
				             }

				             if (y < boxHeight) { //上边放不开
				                 posY = 5;
				             } else { //上边放得下
				                 posY = y - boxHeight;
				             }

				             return [posX, posY];

				         }
				  	},
				  	legend: {
				    	data: legendData
				  	},
				  	grid: {
				    	left: '3%',
				    	right: '4%',
				    	bottom: '3%',
				    	containLabel: true
				  	},
				  	xAxis: [{
				    	type: 'category',
				      	boundaryGap: false,
				      	data: echartData['xAxis'+echartData.planIdList[i]]
				    }],
				  	yAxis: [{
				      	type: 'value'
				    }],
				    dataZoom: {
				    	start: 80,
				        type: "inside"
				    },
				  	series: seriesData
				};
				myChart.setOption(option);
			}
			
		}
		
		function resListString (l,t){
			var strs= new Array();
			var res ='';
				strs=l.split(",");
			for (var i=0;i<strs.length;i++ ){
				if(strs[i]==t){
					delete strs[i];
				}
			}
			for (var i=0;i<strs.length;i++ ){
				if(strs[i]!=undefined&&strs[i]!=''){
					res = res + strs[i]+',';
				}
			}
			if(res.endsWith(',')){
				res = res.substr(0,res.length-1);
    		}
			if(res.startsWith(',')){
				res = res.substr(1,res.length);
			}
			return res;
		}
		  
		//查询
		function select(){
			$('#hideDiv').hide();
			$('#searchTree1').hide();
			selectData();
		}
		//重置
		function reset(){
			$('#hideDiv').hide();
			planId = '';
			$("#knowledgeText").val("");
			$("#startDate").val("");
			$("#endDate").val("");
		}
		
		function getTreeDatas(){
			var userId =  this.getQueryString("userId")||'';
			var projectId =  this.getQueryString("projectId")||'';
			if(projectId != '') {
				$("#hideDiv").css("height", "100px");
				$("#hideDiv button").css("top", "150px");
			}
			var result = invoke('getPlantTree', {modelId:'0',projectId:projectId,userId:userId}).data;
			var sts=eval("("+result+")");
			return sts;
		}
		function getQueryString (name){
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			return r ? unescape(r[2]) : null;
		}
		
		
		function getEcahtData(startDate, endDate,planName){
			var res = $.ajax({
				url: "../g/service/Sample/selectEchatData",
				type:'POST',
				cache:false,
				async:false,
				dataType: "json",
				data:JSON.stringify({ planId : planId, planName : planName,
					startDate : startDate, endDate : endDate }),
				contentType:"application/json",
	            success:function(data){
					return data;
	            }
			});
			return res;
		}
		function invoke(url, args, callback){
			var r, op = {
					url: '../g/service/Sample/' + url,
					type:'POST',
					cache:false,
					async:true,
					dataType:'json',
					data:args ? JSON.stringify(args) : null,
					contentType:"application/json"
				};
			if(typeof callback == 'function'){
				op.success = function(data){
					if(data.error)return alert(data.error);
					callback(data);
				}
			} else {
				op.async = false;
				op.success = function(data){
					r = data
				};
			}
			$.ajax(op);
			if(r)if(r.error){
				alert(r.error);
				return null;
			}
			return r;
		};
	</script>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;">
	<div id="operate" style="position: absolute;top: 0px;left: 20px;right: 0px;height: 50px;">
		<div class="col-md-12" style="position: absolute;top: 10px;padding-left: 5px;padding-right: 5px;">
			
			
			<button class="btn btn-info btn-sm" style="float: right;" onclick=reset()>重置</button>
			<button class="btn btn-info btn-sm" style="float: right;margin-right: 5px;" onclick=select()>查询</button>

			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 60px;font-weight: normal;" for="txt_search_departmentname">方案名称：</label>
	 		<input type="text" id="knowledgeText" name="knowledgeText" class="form-control" readonly style="float: left;margin-top: -3px;padding: 0px;width: 304px;font-weight: normal;"  onclick="$('#hideDiv').show()" placeholder="方案名称"/>			
		
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 21px;padding: 0px;width: 85px;font-weight: normal;" for="txt_search_departmentname">选择时间范围：</label>
			<input id="startDate" class="form-control" placeholder="请选择开始时间" readonly style="float: left;margin-top: -3px;padding: 0px;width: 184px;font-weight: normal;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 20px;" for="txt_search_departmentname">&nbsp; - &nbsp;</label>
			<input id="endDate" class="form-control" placeholder="请选择结束时间" readonly style="float: left;margin-top: -3px;padding: 0px;width: 184px;font-weight: normal;">
		
		</div>
	</div>
	<div id="hideDiv" style="display: none;position: absolute; inset: 50px 5px 0px 85px; overflow: auto;z-index: 99999;width: 304px;height: 235px;background: white;">
	    <div id="knowledgeTree"></div>
	    <button class="btn" type="button" onclick="$('#hideDiv').hide()" style="margin: -17px 0px 0px 213px;border: 1px solid #317cce;color: #317cce;background-color: #eaf8f4;position: fixed;top: 305px;">
	        <span class="glyphicon glyphicon-eye-open"></span> 确定
	    </button>
	</div>
	<div id="echarts" style="width: 100%;height: 100%;overflow: scroll;padding-top: 50px;padding-bottom: 100px;margin-top: 50px;"></div>
</body>
</html>